<template>
  <div class="bridge">
      <div class="flexBetween">
        <div class="flex">
          <!-- <el-input placeholder="请输入" v-model="name" size="small"></el-input> -->
          <!-- <el-button type="primary" size="small" class="paddingLeft">查询</el-button> -->
        </div>
        <div>
          <el-button size="small" type="primary" icon="el-icon-plus" @click="addComponent">新增</el-button>
          <el-button type="primary"  size="small" icon="el-icon-plus" @click="moreAdd = true">批量新增</el-button>
          <el-button type="success" size="small" icon="el-icon-back">导出二维码</el-button>
        </div>
      </div>
      <el-table :data="tableData"  :header-cell-style="{background: '#8595B9',color: '#fff',height:'44px'}"   max-height="500" stripe>
        <el-table-column type="selection" width="55"></el-table-column>
        <el-table-column label="名称" prop="name" show-overflow-tooltip></el-table-column>
        <el-table-column label="构建编号" prop="code" show-overflow-tooltip></el-table-column>
        <el-table-column label="跨" prop="stride" show-overflow-tooltip></el-table-column>
        <el-table-column label="二维码" prop="qrcode" show-overflow-tooltip>
          <template slot-scope="scope">
             <el-image
              style="width: 50px; height: 50px;margin-top:10px;"
              :src="download + scope.row.qrcode"
              :preview-src-list="[download + scope.row.qrcode]"
            ></el-image>
          </template>
        </el-table-column>
        <el-table-column label="操作">
            <template slot-scope="scope">
               <el-tooltip content="修改">
              <el-button type="text" icon="el-icon-edit-outline" @click="handelEdit(scope.row)"></el-button>
            </el-tooltip>
               <el-tooltip content="删除">
                <el-button type="text" icon="el-icon-delete" style="color:red !important" @click="del(scope.row)"></el-button>
               </el-tooltip>
            </template>
        </el-table-column>
      </el-table>
      <!-- <div class="page">
        <el-pagination
            background
            layout="prev, pager, next"
            :total="total"
             :page-size="pageSize"
          :page-count="pageNum"
          @current-change="changeCurrent">
        </el-pagination>
      </div> -->
      <!-- 新增-->
        <vx-popup
            :title="addTitle"
            width="480px"
            @close="cancelFormSubmit"
            :active.sync="add"
            @confirmPopup="submit"
            @cancelPopup="cancelFormSubmit"
        >
            <el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="100px" class="demo-ruleForm" style="width:72%;margin:0 auto">
                <el-form-item label="构件名称:" prop="name">
                    <el-input v-model="ruleForm.name"  size="small" placeholder="请输入构件名称"></el-input>
                </el-form-item>
                <el-form-item label="构件编号:" prop="code">
                    <el-input v-model="ruleForm.code"  size="small" placeholder="请输入构件编号"></el-input>
                </el-form-item>
                <el-form-item label="跨:" prop="stride">
                    <el-input v-model="ruleForm.stride"  size="small" placeholder="请输入跨"></el-input>
                </el-form-item>
                <el-form-item label="数量编号:" prop="numCode">
                    <el-input v-model="ruleForm.numCode"  size="small" placeholder="请输入数量编号"></el-input>
                </el-form-item>
                <el-form-item label="二维码:">
          <el-upload
            :action="upload"
            list-type="picture-card"
            :on-remove="removeRender"
            :on-success="handleSuccessRender"
            :file-list="imgList"
            :limit="1"
          >
            <i class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
                <el-form-item label="备注:" prop="remark">
          <el-input
            type="textarea"
            v-model="ruleForm.remark"
            maxlength="500"
            show-word-limit
            size="small"
          ></el-input>
        </el-form-item>
        
            </el-form>
        </vx-popup>
         <!-- 批量新增-->
        <vx-popup
            title="批量新增构件"
            width="480px"
            @close="cancelFormMore"
            :active.sync="moreAdd"
            @confirmPopup="more"
            @cancelPopup="cancelFormMore"
        >
            <el-form :model="moreForm" :rules="moreRules" ref="moreForm" label-width="100px" class="demo-ruleForm" style="width:72%;margin:0 auto">
               <el-form-item label="构件名称:" prop="name">
                    <el-input v-model="moreForm.name"  size="small" placeholder="请输入构件名称"></el-input>
                </el-form-item>
                <el-form-item label="构件编号:" prop="code">
                    <el-input v-model="moreForm.code"  size="small" placeholder="请输入构件编号"></el-input>
                </el-form-item>
                <el-form-item label="跨:" prop="stride">
                    <el-input v-model="moreForm.stride"  size="small" placeholder="请输入跨"></el-input>
                </el-form-item>
                <el-form-item label="跨数:" prop="num">
                    <el-input v-model="moreForm.num"  size="small" placeholder="请输入跨数"></el-input>
                </el-form-item>
                <el-form-item label="备注:" prop="remark">
          <el-input
            type="textarea"
            v-model="moreForm.remark"
            maxlength="500"
            show-word-limit
            size="small"
          ></el-input>
        </el-form-item>
            </el-form>
        </vx-popup>
  </div>
</template>
<script>
import base from "../../../api/base";
export default {
  name: 'bridgeComponent',
  props: {
    structureId: {
      type: String
    },
    ownId: {
      type: String
    },
    structureModelId:{
      type: String
    }
  },
  data() {
    return {
       upload: base.UPLOADURL,
      download: base.DOWNLOADURL,
      addTitle: '新增构件',
      name: "",
      tableData: [],
      total: 0,
      pageSize: 10,
      
      imgList: [],
    add:false,
    moreAdd: false,
    ruleForm: {
        name: '',
        code: '',
        remark: '',
        qrCode: '',
        numCode:'',
        stride:''
    },
    rules: {
        name: [
        { required: true, message: '请输入构件名称', trigger: 'blur' }
        ],
         stride: [
        { required: true, message: '请输入跨', trigger: 'blur' }
        ],
         numCode: [
        { required: true, message: '请输入数量编号', trigger: 'blur' }
        ]
    },
    moreForm:{
      name:'',
      code:'',
      remark:'',
      stride:'',
      num:''
    },
    moreRules:{
      name: [
        { required: true, message: '请输入构件名称', trigger: 'blur' }
      ],
       stride: [
        { required: true, message: '请输入跨', trigger: 'blur' }
        ],
         num: [
        { required: true, message: '请输入跨数', trigger: 'blur' }
        ]
    }
    }
  },
  watch: {
    'structureId': {
      handler(val,old) {
        if(val) {
          this.queryBridgeComponents()
        }
      },
      immediate: true
    }
  },
  methods: {
    queryBridgeComponents() {
      let data = {
        ownId: this.ownId,
        structureId: this.structureId
      }
      this.$api.bridge.queryBridgeComponents(data).then(res => {
        if(res.data.success) {
          this.tableData = res.data.data[0]
        }
      })
    },
     handleSuccessRender(res, file) {
      this.ruleForm.qrCode = res.data.successFiles[0].filePath
    },
    removeRender() {
      this.ruleForm.qrCode = '';
    },
    addComponent() {
      this.addTitle = '新增构件'
      this.add = true
    },
    handelEdit(val) {
      this.addTitle = '修改构件'
      this.add = true
      this.ruleForm = JSON.parse(JSON.stringify(val))
    },
    del(val) {
      this.$confirm("此操作将删除桥梁结构, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          this.$api.bridge.deleteBridgeComponent({ id: val.id }).then(res => {
            if (res.data.success) {
              this.$vs.notify({
                text: "删除成功",
                color: "success",
                icon: "success"
              });
              this.queryBridgeComponents();
            }
          });
        })
        .catch(() => {});
    },
    reset(){
      this.ruleForm = {
        name: '',
        code: '',
        remark: '',
        qrCode: '' ,
        stride:'',
        numCode:''
      }
    },
    cancelFormSubmit() {
      this.add = false
      this.reset()
    },
    submit() {
      this.$refs["ruleForm"].validate(valid => {
        if (valid) {
          if(this.addTitle === '新增构件'){
          this.$api.bridge.addBridgeComponent({...this.ruleForm,ownId: this.ownId,structureId: this.structureId,structureModelId:this.structureModelId}).then(res => {
            if(res.data.success){
              this.$vs.notify({
                text: "新增构件成功",
                color: "success"
              })
              this.add = false
              this.reset()
              this.queryBridgeComponents()
            }
          })
          } else{
            let data = {
              id: this.ruleForm.id,
              ownId: this.ownId,
              structureId: this.structureId,
              name: this.ruleForm.name,
              code: this.ruleForm.code,
              qrCode: this.ruleForm.qrCode,
              remark: this.ruleForm.remark
            }
            this.$api.bridge.updateBridgeComponent(data).then(res => {
              if(res.data.success){
                 this.$vs.notify({
                text: "修改构件成功",
                color: "success"
              })
              this.add = false
              this.reset()
              this.queryBridgeComponents()
              }
            })
          }
        }
      })
    },
    resetMore(){
      this.moreForm = {
        name:'',
        code:'',
        remark:'',
        stride:'',
        num:''
      }
    },
    cancelFormMore(){
      this.moreAdd = false
      this.resetMore()
    },
    more(){
      this.$refs['moreForm'].validate(valid => {
        if(valid) {
          this.$api.bridge.addBridgeComponentBatch({...this.moreForm,structureModelId:this.structureModelId,ownId:this.ownId,structureId:this.structureId}).then(res => {
            if(res.data.success) {
               this.$vs.notify({
                text: "批量新增构件成功",
                color: "success"
              })
              this.moreAdd = false
              this.resetMore()
              this.queryBridgeComponents()
            }
          })
        }
      })
    },
  }
};
</script>
<style scoped lang="scss">
/deep/.el-table__header tr,
  .el-table__header th {
    padding: 0;
    height: 44px;
}
/deep/.el-upload--picture-card {
  width: 60px;
  height: 60px;
  line-height: 60px;
  text-align: center;
  font-size: 28px;
}
/deep/.el-upload-list--picture-card .el-upload-list__item {
  width: 60px;
  height: 60px;
}
.bridge {
  width: 100%;
  .flexBetween{
      display: flex;
      margin-bottom:20px;
      justify-content: space-between;
      .paddingLeft{
          margin-left:20px;
      }
  }
  .table {
      margin-top:20px;
  }
  .page{
      margin-top:20px;
      text-align: center;
  }
}
</style>